<template>
	<div class="sale">
		<div class="sale_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">在售商品<i class="el-icon-close"></i></div>
		</div>
		<div class="sale_bottom">
			<div class="sale_bottom_new">
				<div class="sale_bottom_new_goods">
					<div class="sale_bottom_new_goods_btn">
						<button @click="handleAddshop">新增商品</button>
					</div>
					<div class="sale_bottom_new_goods_screening">
						<div class="sale_bottom_new_goods_screening_left">
							<i>商品分类</i>
							<el-cascader @change="handerChange" :options="cateList" :props="cate" :show-all-levels="false" clearable></el-cascader>
						</div>
						<div class="sale_bottom_new_goods_screening_right">
							<el-input v-model="input" placeholder="请输入商品信息查询"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
			<el-tabs v-model="activeName" v-if="sale_type==1" @tab-click="handleClick" style="padding:0 20px;">
				<el-tab-pane label="家居" name="1"></el-tab-pane>
				<el-tab-pane label="泛家居" name="2"></el-tab-pane>
			</el-tabs>
			<div class="sale_bottom_table_box">
				<div class="sale_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>商品号</th>
							<th>商品</th>
							<th>价格</th>
							<th>库存</th>
							<th>销量</th>
							<th>属性</th>
              <th>排序</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.product_id}}</td>
							<td>{{v.product_title}}</td>
							<td>{{v.price}}</td>
							<td>{{v.num == null ? '0' : v.num}}</td>
							<td>{{v.volume}}</td>
							<td>{{v.status == 1 ? '上架' : '下架'}}</td>
              <td>
                <el-input style="width:80px;margin-right:10px;" size="mini" v-model="v.sort"></el-input>
                <el-button type="primary" style="width:60px;text-align:center;" size="mini" @click="changeSort(v.product_id,v.sort)">确定</el-button>
              </td>
							<td>
                <button class="editor" style="margin-right:10px" @click="toDetailpop(v.product_id)">预览</button>
								<button class="editor" @click="handerNewShop(v.product_id)">编辑</button>
								<button class="shelves" @click="shelves(v.product_id)">下架</button>
								<!-- <button class="delete" @click="del(v.product_id)">删除</button> -->
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="8">当前数据空空如也</td></tr>
					</table>
				</div>
			</div>
		</div>
		<div class="sale_bottom_page">
			<div class="sale_bottom_page_left">
				<div class="sale_bottom_page_left_checkAll" @click="handerCheckAll">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
          <div class="checkbox-botton">全选</div>
				</div>				
				<el-button type="primary" @click="shelvesAll" :disabled="openIsDisabled">下架</el-button>
				<!-- <el-button type="primary" @click="selectDel" :disabled="openIsDisabled ">删除</el-button> -->
			</div>
			<div class="sale_bottom_page_right">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="pageSize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total"
					  background>
				</el-pagination>
			</div>
		</div>

    <!-- 预览手机 -->
        <div class="modal fade in" tabindex="-1" style="padding-right: 17px;" v-if="deatilpop" @click="deapop">
            <div class="modal-dialog" style="width: 413px;">
                <div class="fe-phone">
                    <div class="fe-phone-left"></div>
                    <div class="fe-phone-center">
                        <div class="fe-phone-top"></div>
                        <div class="fe-phone-main">
                            <div class="deatil">
                              <div class="block">
                                    <el-carousel trigger="click" height="300px">
                                        <el-carousel-item v-for="(item,index) in  datadeatil.round_imgs" :key="index">
                                            <h3 class="small"><img width="100%" :src="item.image_path"></img></h3>
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                              <!-- 商品基础信息 -->
                            <div class="g_base">
                                <div>
                                    <div class="g_bSell">库存:{{datadeatil.num}}</div>
                                    <div class="g_bPrice"><div class="ledtprei">￥<i>{{datadeatil.price}}</i></div><div class="ledtprei2">￥<i>{{datadeatil.primary_price}}</i></div></div>
                                </div>
                                <div>
                                    <div class="g_bName omit-2">{{datadeatil.product_title}}</div>
                                </div>
                            </div>
                        
                            <div class="g_it">
                                <div class="g_iGroup">
                                    <div class="g_iItem">
                                        <div class="g_iLabel">选择</div>
                                        <div class="g_iCont">
                                            <div class="g_iIcon"><img src="../../../assets/icon_more.png"></img></div>
                                            <div class="g_iTxt">规格分类</div>
                                            <div class="g_iSelect" v-if="datadeatil.sku_lst">
                                                <div style="display: flex; overflow-x: auto; width: 50%;">
                                                    <div style="display: flex;">
                                                        <div class="g_isItem" v-for="(itme,index) in datadeatil.sku_lst" :key="index"><img :src="datadeatil.round_imgs[0].image_path"></img></div>
                                                    </div>
                                                </div>
                                                <div class="g_isLabel">共有{{datadeatil.sku_lst.length}}种规格分类可选</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 商品详情 -->
                            <div class="g_detail">
                                <div class="g_dTitle">商品详情</div>
                                <div class="g_dTitles" v-html="textDetails" >
                                    
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="fe-phone-bottom" style="overflow:hidden;">
                            <div style="height:52px; width: 52px; border-radius: 52px; margin:20px 0px 0px 159px; cursor: pointer;" data-dismiss="modal" aria-hidden="true" title="点击关闭"></div>
                        </div>
                    </div>
                    <div class="fe-phone-right"></div>
               </div>
           </div>
       </div>
		<!-- <el-button :plain="true" @click="openCenter">123</el-button> -->
	</div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      value: "",
      cateList: [],
      cate: {
        value: "cate_id",
        label: "cate_name",
        children: "child",
        expandTrigger: "hover"
      },
      tableList: [],
      store_id: "",
      openIsDisabled: false ,//按钮的禁用
      deatilpop:false,
      datadeatil:'',
      textDetails: "",
      activeName:'1',
      sale_type:1
    };
  },
  mounted() {
    let sid = localStorage.getItem("sid");
    this.store_id = sid;
    let sale_type = JSON.parse(localStorage.getItem('sale_type'))
    this.sale_type = sale_type?sale_type:1
    if(this.sale_type==2){
      this.activeName = '2'
    }
    // console.log(this.store_id);
    this.init();
  },
  
  methods: {
    toDetailpop(id){
         this.$http
          .post("/api/admin/shop/product/detail", { product_id: id,store_id: this.store_id})
          .then(res => {
              if(res.code == 1){
                  this.datadeatil = res.data
                  this.textDetails = res.data.details
                  this.checkImg(this.textDetails)
                  this.deatilpop = true
              }
          })
        },
         checkImg(contents) {
            this.textDetails = contents.replace( /\<img/gi, '<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
         },
        deapop(){
          this.deatilpop = false
        },
    // 获取数据
    init() {
      this.$http
        .post("/api/admin/shop/product/saleLst", {
          page: this.page,
          pagesize: this.pageSize,
          keyword: this.input,
          cate_id: this.value,
          store_id: this.store_id,
          sale_type:this.activeName
        })
        .then(res => {
			console.log(res);
          if (res.code == 1) {
            this.tableList = res.data.data;
            if (this.tableList.length == 0) {
              this.openIsDisabled = true;
            } else {
              this.openIsDisabled = false;
            }
            this.total = res.data.count;
          }
        });
      this.$http.post("/api/admin/shop/Cate/cateLst", {sale_type:this.activeName}).then(res => {
        if (res.code == 1) {
          let cate_list = res.data.filter(item=>item.child)
          this.cateList = cate_list;
        }
      });
    },

    // 切换tab
    handleClick(){
      this.init()
    },

    // 排序按钮
        changeSort(id,sort){
            console.log(id,sort,'=====');
            let store_id = localStorage.getItem('sid')
            this.$http.post('/api/admin/shop/product/saveSort',{store_id,product_id:id,sort}).then(res=>{
                console.log(res,'排序结果');
                if(res.code==1){
                    this.init()
                    this.$message.success('操作成功')
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

          // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].product_id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].product_id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},


    // 全选下架
    shelvesAll() {
      console.log(this.shelvesAlls,'////');
      if(!this.shelvesAlls.length){
        this.$message.warning('请选择需要下架的商品')
        return
      }
      this.$confirm("此操作下架所选商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = {
          status:0,
          id_lst:this.shelvesAlls.join(','),
          store_id:this.store_id
        }
        console.log(params,'000');
        this.$http.post('/api/admin/shop/product/setStatus',params).then(res=>{
          console.log(res,'888');
          if(res.code==1){
            this.$message.success('下架成功')
            this.checkBoxAll = [];
            this.shelvesAlls = [];
            this.checkAll = false
            this.init()
          }else{
            this.$message.warning(res.msg)
          }
        })
      }).catch(()=>{})
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },
    // 删除
    del(i) {
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let id_lst = i.toString();
          this.$http
            .post("/api/admin/shop/product/recovery", { id_lst, recycle: 0 })
            .then(res => {
              if (res.code == 1) {
                this.$message.success('删除商品成功')
                this.init();
                this.checkBoxAll = [];
                this.shelvesAlls = [];
                this.checkAll = false
              }else{
                this.$message.warning(res.msg)
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 选中删除
    // selectDel() {
    //   this.$confirm("此操作将删除选中商品, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.$http
    //         .post("/api/admin/shop/product/recovery", {
    //           id_lst: this.shelvesAlls,
    //           recycle: 0
    //         })
    //         .then(res => {
    //           if (res.code == 1) {
    //             this.init();
    //             this.checkBoxAll = [];
    //             if (this.checkBoxAll.length == 0) {
    //               this.checkAll = false;
    //               this.openCenter();
    //             }
    //           }
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除"
    //       });
    //     });
    // },

    // 新增商品按钮
    handleAddshop() {
      console.log(123);
      this.$router.push({name:'newShop'});
    },

    // 跳转到商品详情
    handerNewShop(i) {
      console.log(i, 696969);
      let id = i;
      this.$router.push({ name:'newShop',query:{id} });
    },
    // 筛选
    handerChange(e) {
      // console.log(e,123123);
      this.value = e[e.length - 1];
      this.init();
    },
    // 输入关键字搜索
    handerSeach() {
      this.init();
    },
    // 下架
    shelves(v) {
      // let id_lst = v.toString();
      let params = {
        id_lst: v.toString(),
        status: 0,
        store_id: this.store_id
      };
      this.$http.post("/api/admin/shop/product/setStatus", params).then(res => {
        if (res.code == 1) {
          this.init();
          this.$message({
            message: "下架成功",
            type: "success"
          });
          this.checkBoxAll = [];
          this.shelvesAlls = [];
          this.checkAll = false
        }else{
          this.$message.warning(res.msg)
        }
      });
    },
    // 消息提示
    openCenter() {
      this.$message({
        message: "删除成功",
        type: "success",
        duration: 2000,
        center: true
      });
    }
  }
};
</script>

<style lang="less" scoped="scoped">
@import "sale.less";
</style>
